<template>
  <div class="card">
    <div class="card-header" @click="showMessageDetail">
      <h3><i class="el-icon-message"></i> 消息通知</h3>
      <i class="el-icon-more"></i>
    </div>
    <div class="card-body">
      <div class="message-list">
        <div 
          v-for="(message, index) in visibleMessages" 
          :key="index" 
          class="message-item"
          @click="handleMessageClick(message)"
        >
          <div class="message-badge" :class="getBadgeClass(message.type)">{{ message.type.charAt(0) }}</div>
          <div class="message-content">
            <h4>{{ message.title }}</h4>
            <p>{{ message.content }}</p>
            <div class="message-footer">
              <span>{{ message.time }}</span>
              <el-link type="primary" :underline="false" v-if="message.link">查看详情 →</el-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 消息通知详情弹窗 -->
    <MessageDetail 
      :visible="isMessageDetailVisible" 
      :messages="messages"
      @close="hideMessageDetail"
      @message-click="handleMessageClick"
    />
  </div>
</template>

<script>
import MessageDetail from './MessageDetail.vue'

export default {
  name: 'Messages',
  components: {
    MessageDetail
  },
  data() {
    return {
      isMessageDetailVisible: false,
      maxVisibleMessages: 3,
      messages: [
        {
          type: '采购通知',
          title: '新采购申请待审批',
          content: '您有3份新的采购申请需要审批，请及时处理。',
          time: '2023-05-15 10:30',
          link: '/approval'
        },
        {
          type: '维修通知',
          title: '设备维修完成',
          content: '您提交的打印机维修申请已完成，请确认维修结果。',
          time: '2023-05-14 16:45',
          link: '/repair'
        },
        {
          type: '系统通知',
          title: '系统维护通知',
          content: '系统将于本周六凌晨2:00-4:00进行维护升级，期间将无法访问。',
          time: '2023-05-13 09:20',
          link: '/system'
        },
        {
          type: '会议通知',
          title: '部门周会提醒',
          content: '本周五下午3:00在会议室A召开部门周会，请准时参加。',
          time: '2023-05-12 14:15',
          link: '/meeting'
        },
        {
          type: '审批通知',
          title: '您的请假申请已批准',
          content: '您提交的5月20日-5月22日的请假申请已获批准。',
          time: '2023-05-11 11:05',
          link: '/leave'
        }
      ]
    }
  },
  computed: {
    visibleMessages() {
      return this.messages.slice(0, this.maxVisibleMessages)
    }
  },
  methods: {
    showMessageDetail() {
      this.isMessageDetailVisible = true
    },
    hideMessageDetail() {
      this.isMessageDetailVisible = false
    },
    handleMessageClick(message) {
      if (message.link) {
        this.$router.push(message.link)
      }
    },
    getBadgeClass(type) {
      const typeMap = {
        '采购通知': 'purple',
        '维修通知': 'blue',
        '系统通知': 'orange',
        '会议通知': 'green',
        '审批通知': 'cyan'
      }
      return typeMap[type] || 'gray'
    }
  }
}
</script>

<style scoped>
.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f9fa;
  cursor: pointer;
  transition: background 0.2s;
}

.card-header:hover {
  background-color: #f0f2f5;
}

.card-header h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
  display: flex;
  align-items: center;
}

.card-header h3 i {
  margin-right: 8px;
  color: #666;
}

.message-list {
  padding: 8px 0;
}

.message-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
  cursor: pointer;
}

.message-item:last-child {
  border-bottom: none;
}

.message-item:hover {
  background-color: #f5f7fa;
}

.message-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
  font-size: 12px;
}

.message-badge.purple {
  background-color: #9c27b0;
}

.message-badge.blue {
  background-color: #2196f3;
}

.message-badge.orange {
  background-color: #ff9800;
}

.message-badge.green {
  background-color: #4caf50;
}

.message-badge.cyan {
  background-color: #00bcd4;
}

.message-badge.gray {
  background-color: #9e9e9e;
}

.message-content {
  flex: 1;
}

.message-content h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #333;
}

.message-content p {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}
</style>